
import { UdDateRangePicker, UdFilter, UdPage, UdPageHeader, http } from '@/lib'
import { Icon, Spin, Statistic } from 'antd'
import { WrappedFormUtils } from 'antd/lib/form/Form'
import * as React from 'react'
import apis from '@/apis/MonitoringAndWarning'
import { dataRange } from '@/utils/methods'
import { Card, Col, Row } from 'antd'
export default class WarningStatistics extends React.PureComponent<any> {
  private filterForm: WrappedFormUtils = {} as WrappedFormUtils
  state = {
    querying: false,
    conditions: [
      {
        id: ['beginTime', 'endTime'],
        label: '起止时间',
        render: <UdDateRangePicker ranges={dataRange} valueFormat={['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59']} />,
      },
    ],
    searchValues: {},
    statistics: { monitorPullCount: [], monitorPushCount: [] },
  }
  private handleSearch = values => {
    this.setState({ searchValues: { ...values } }, () => {
      this.getRecordTableData()
    })
  }
  private resetFilterHandle = () => {
    this.getRecordTableData()
  }
  private getRecordTableData = async () => {
    this.setState({ querying: true })
    let { searchValues } = this.state
    http
      .post(apis.queryWarningStatistics, {
        ...searchValues,
      })
      .then(res => {
        let statistics = res.data ?? { monitorPullCount: [], monitorPushCount: [] }
        this.setState({ statistics })
      })
      .finally(() => {
        this.setState({
            querying: false,
        })
      })
  }
  componentDidMount(): void {
    this.getRecordTableData()
  }
  render() {
    let {
      querying,
      conditions,
      statistics: { monitorPullCount, monitorPushCount },
    } = this.state
    return (
      <Spin spinning={querying} tip={'请求中，请稍后...'}>
        <UdPage className="list-page">
          <UdPageHeader title="监控预警统计" />
          <UdFilter
            getForm={form => {
              this.filterForm = form
            }}
            items={conditions}
            onSearch={values => {
              this.handleSearch(values)
            }}
            loading={querying}
            resetAfter={this.resetFilterHandle}
          />
          <UdPageHeader title="同步推送记录" />
          <Row gutter={16}>
            {monitorPullCount.map(item => {
              return (
                <Col span={8} key={item.id}>
                  <Card title={item.typeName} headStyle={{ fontWeight: 'bold' }}  extra={<Icon type="line-chart" />}>
                    <Col span={12}>
                      <Statistic title="成功" value={item.successNumber} valueStyle={{ fontWeight: 'bold' }} />
                    </Col>
                    <Col span={12}>
                      <Statistic title="失败" value={item.failNumber} valueStyle={{ fontWeight: 'bold' }} />
                    </Col>
                  </Card>
                </Col>
              )
            })}
          </Row>
          <UdPageHeader title="同步接收记录" />
          <Row gutter={16}>
            {monitorPushCount.map(item => {
              return (
                <Col span={8} key={item.id}>
                  <Card title={item.typeName} headStyle={{ fontWeight: 'bold' }} extra={<Icon type="line-chart" />}>
                    <Col span={12}>
                      <Statistic title="成功" value={item.successNumber} valueStyle={{ fontWeight: 'bold' }} />
                    </Col>
                    <Col span={12}>
                      <Statistic title="失败" value={item.failNumber} valueStyle={{ fontWeight: 'bold' }} />
                    </Col>
                  </Card>
                </Col>
              )
            })}
          </Row>
        </UdPage>
      </Spin>
    )
  }
}
